<template>
  <div class="charts">
    <h2>近期天气</h2>
    <div class="echarts">
      <div class="text">
        <div class="today" v-for="item in result" :key="result.indexOf(item)">
          <span>周{{ arr[item.week - 1] }}</span>
          <span>{{ item.date.slice(5, 10) }}</span>
          <span>{{ item.dayweather }}</span>
          <span class="bt">风力{{ item.daypower }}级</span>
        </div>
      </div>
      <div id="main"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'ChartsBox',
  data() {
    return {
      adcode: '',
      arr: ['一', '二', '三', '四', '五', '六', '日'],
      result: [],
    }
  },
  mounted() {
    const a = localStorage.getItem('currentcode')
    console.log(a)
    this.adcode = a
    this.currentCity()
  },
  methods: {
    currentCity() {
      axios({
        url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${this.adcode}&key=b36dd440f158868263e0266de8cc36b8&extensions=all`,
        method: 'GET',
      })
        .then((res) => {
          this.result = res.data.forecasts[0].casts
          // console.log(res.data.forecasts[0].casts)
          return res.data.forecasts[0].casts
        })
        .then((res) => {
          // console.log(res)
          const daytemp = res.map((item) => item.daytemp)
          const nighttemp = res.map((item) => item.nighttemp)
          // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'))
          // 绘制图表
          myChart.setOption({
            grid: {
              x: 25, //左侧与y轴的距离
              y: 50, //top部与x轴的距离
              x2: 40, //右侧与y轴的距离
              y2: -12, //bottom部与x轴的距离
            },
            tooltip: {},
            xAxis: {
              show: false,
              data: res.map((item) => item.date),
            },
            yAxis: {
              show: false,
            },
            series: [
              {
                name: 'date',
                type: 'line',
                data: daytemp,
                smooth: true,
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 12,
                  },
                  formatter: function (params) {
                    return `白${params.value}℃`
                  },
                },
                lineStyle: {
                  color: '#5470C6',
                },
              },
              {
                name: 'date',
                type: 'line',
                data: nighttemp,
                smooth: true,
                label: {
                  show: true,
                  position: 'bottom',
                  textStyle: {
                    color: '#fff',
                    fontSize: 12,
                  },
                  formatter: function (params) {
                    return `晚${params.value}℃`
                  },
                },
                lineStyle: {
                  color: '#91CC75',
                },
              },
            ],
          })
        })
    },
  },
}
</script>

<style scope>
.charts {
  width: 80%;
  margin: 20px auto 0;
}
.charts h2 {
  margin-top: 45px;
  margin-bottom: 10px;
}
.echarts {
  display: flex;
  flex-direction: column;
  height: 384px;
  background-color: #014e70;
  border-radius: 5px;
}
.echarts .text {
  display: flex;
  justify-content: space-around;
  margin: 40px 40px 0 40px;
}
.echarts .text .today {
  display: flex;
  flex-direction: column;
  font-size: 16px;
}
.echarts .text .today span {
  margin: 10px;
}
.echarts .text .today .bt {
  margin: 10px 10px 0 10px;
}
.charts #main {
  width: 100%;
  height: 50%;
}
</style>
